<template>
	<div v-loading="loading">
		<div class="title1">
			<div>
				<span class="h1">基础管理</span>
				<span class="h2">自定义管理</span>
			</div>
		</div>
		<div class="con">
			<div>
				<el-button type="primary" @click="openMody()">+ 新建</el-button>
				<div style="width:240px;float:right;position: relative;">
					<el-input v-model="input" placeholder="请输入..."></el-input>
					<i @click="search()" class="el-icon-search" style="position: absolute; width:40px;height:36px;right:0;top:0;color:#000;text-align:center;line-height:36px"></i>
				</div>
			</div>
			<div style="margin-top: 10px; overflow: auto;padding-bottom: 100px;">
				<el-table :data="tableData5" style="width: 100%">
					<el-table-column type="index" width="60">
					</el-table-column>
					<el-table-column label="名称" prop="FieldName" sortable>
					</el-table-column>
					<el-table-column label="标题" prop="FieldCaption" sortable>
					</el-table-column>
					<el-table-column label="数据类型" prop="DataTypeStr" sortable>
					</el-table-column>
					<el-table-column label="自定义类型" prop="ExtendTypeStr" sortable>
					</el-table-column>
					<el-table-column label="是否多选" prop="desc">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.IsMulti" @change="isMulti(scope.row.ID,scope.row.IsMulti)" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="是否可空" prop="name">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.IsEmpty" @change="isEmpty(scope.row.ID,scope.row.IsEmpty)" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="是否可用">
						<template slot-scope="scope">
							<el-switch v-model="scope.row.Status" @change="isstue(scope.row.ID,scope.row.Status)" active-color="#13ce66" inactive-color="#ff4949">
							</el-switch>
						</template>
					</el-table-column>
					<el-table-column label="操作">
						<template slot-scope="scope">
							<el-button size="small" type="primary" @click="modify(scope.row.ID,scope.row.Extend_Type,scope.row.FieldName,scope.row.FieldCaption,scope.row.DataType,scope.row.DictID,scope.row.IsMulti,scope.row.IsEmpty,scope.row.Status)">编辑</el-button>
							<el-button size="small" type="danger" @click.native.prevent="deleteRow(scope.row.ID)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div style="float: right; margin-top: 10px;margin-right: 5px;">
					<el-pagination :current-page="pageindex" @current-change="handleCurrentChange" layout="prev, pager, next" :total="leng">
					</el-pagination>
				</div>
			</div>
		</div>
		<div class="edit" v-if="dialogVisible">
			<el-dialog title="修改业务员" :visible.sync="dialogVisible" size="tiny" :before-close="handleClose">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="名称">
						<el-input v-model="form.FieldName"></el-input>
					</el-form-item>
					<el-form-item label="标题">
						<el-input v-model="form.FieldCaption"></el-input>
					</el-form-item>
					<el-form-item label="数据类型">
						<el-select v-model="dataValue" clearable placeholder="请选择" style="width: 100%;" clearable @change="chang1()">
							<el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="词典" v-if="dict">
						<el-select v-model="ExtDic"  clearable placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in ExtDics" :key="item.value" :label="item.lable" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自定义类型">
						<el-select v-model="ExtValue" clearable placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in ExtType" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<div class="radis">
						<span>是否多选</span>
						<el-switch v-model="val1" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
						<span>是否可空</span>
						<el-switch v-model="val" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
						<span>是否可用</span>
						<el-switch v-model="val2" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
					</div>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="qxxg()">取 消</el-button>
					<el-button type="primary" @click="xiugai()">确 定</el-button>
				</span>
			</el-dialog>
		</div>

		<div class="edit" v-if="mody">
			<el-dialog title="新建自定义" :visible.sync="mody" size="tiny" :before-close="handleClose">
				<el-form ref="form" :model="form" label-width="100px">
					<el-form-item label="名称">
						<el-input v-model="form.FieldName"></el-input>
					</el-form-item>
					<el-form-item label="标题">
						<el-input v-model="form.FieldCaption"></el-input>
					</el-form-item>
					<el-form-item label="数据类型">
						<el-select v-model="dataValue" clearable placeholder="请选择" style="width: 100%;" @change="chang()">
							<el-option v-for="item in dataType" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="词典" v-if="dict">
						<el-select v-model="ExtDic" clearable placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in ExtDics" :key="item.value" :label="item.lable" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="自定义类型">
						<el-select v-model="ExtValue" clearable placeholder="请选择" style="width: 100%;">
							<el-option v-for="item in ExtType" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>
					</el-form-item>
					<div class="radis">
						<span>是否多选</span>
						<el-switch v-model="val" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
						<span>是否可空</span>
						<el-switch v-model="val1" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
						<span>是否可用</span>
						<el-switch v-model="val2" active-color="#13ce66" inactive-color="#ff4949">
						</el-switch>
					</div>
				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="qxxj()">取 消</el-button>
					<el-button type="primary" @click="add()">确 定</el-button>
				</span>
			</el-dialog>
		</div>
		<div class="edit editd" v-if="del">
			<el-dialog title="提示" :visible.sync="del" size="tiny" width="30%" :before-close="handleClose">
				<span>是否删除此条信息</span>
				<span slot="footer" class="dialog-footer">
			    <el-button @click="del = false">取 消</el-button>
			    <el-button type="primary" @click="delExt()">确 定</el-button>
			  </span>
			</el-dialog>
		</div>
	</div>
</template>

<script>
	import api from '../../kits/api.js';
	export default {
		name: 'custom',
		data() {
			return {
				dict: false,
				ExtDic: "",
				ExtDics: [],
				id: "",
				del: false,
				mody: false,
				leng: 1,
				loading: true,
				input: "",
				val: "",
				val1: "",
				val2: "",
				dataType: [{
					value: '1',
					label: '字符'
				}, {
					value: '2',
					label: '数字'
				}, {
					value: '3',
					label: '日期'
				}, {
					value: '4',
					label: '列表'
				}],
				dataValue: "",
				ExtType: [{
					value: '1',
					label: '业务员'
				}, {
					value: '2',
					label: '客户'
				}, {
					value: '3',
					label: '项目'
				}],
				ExtValue: "",
				value: '',
				form: {
					FieldCaption: '',
					FieldName: '',
				},
				showEdit: false, //显示编辑
				tableData: [],
				user: [{
					"username": "",
					"name": "",
					"password": "",
					"regpassword": "",
					"tel": "",
				}],
				currentRow: null,
				dialogVisible: false,
				tableData5: [],
				activeName: 'second',
				Extend_Type: "1",
				DataType: "",
				DictID: "",
				Status: "",
				data4: [],
				pageindex:0,//页码
			}
		},
		mounted: function() {
			this.getlist()
		},
		methods: {
			handleCurrentChange(val) {
				this.loading = true
				this.pageindex = val
				this.$axios.post(api.getlist, {
					"Para": this.input,
					"PageSize": 10,
					"PageIndex": this.pageindex - 1,
					"OrderbyString": 'FieldName'
				}).then((res) => {
					if(res.data.isOK) {
						this.tableData5 = res.data.data.Data
						this.leng = res.data.data.Items || 1
						this.loading = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			handleClick(tab, event) {
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
						this.qxxj()
					})
					.catch(_ => {});
			},
			//打开删除模块传入id
			deleteRow(id) {
				this.id = id;
				this.del = true;
			},
			//取消
			qxxj(){
				this.form.FieldCaption=""
				this.form.FieldName="",
				this.ExtValue = ""
				this.dataValue=""
				this.val="",
				this.val1="",
				this.val2="",
				this.mody = false;
			},
			qxxg(){
				this.ExtValue = ""
				this.dataValue=""
				this.dialogVisible=false
			},
			//删除信息
			delExt() {
				this.loading = true
				this.$axios.get(api.del + '/' + this.id).then((res) => {
					if(res.data.isOK) {
						this.loading = false;
						this.getlist()
						this.del = false;

					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.del = false;
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//修改自定义
			modify(id, Extend_Type, FieldName, FieldCaption, DataType, DictID, IsMulti, IsEmpty, Status) {
				this.id = id;
				this.ExtValue = Extend_Type.toString();
				this.form.FieldName = FieldName;
				this.form.FieldCaption = FieldCaption;
				this.dataValue = DataType.toString();
				this.ExtDic = DictID.toString();
				this.val = IsEmpty;
				this.val1 = IsMulti;
				this.val2 = Status;
				this.chang()
				this.dialogVisible = true;
			},
			//确定修改
			xiugai() {
				this.loading = true;
				if(this.dataValue != 4) {
					this.DictID="";
				} else {
					this.DictID = this.ExtDic
				}
//				this.DictID = this.ExtDic?this.DictID=this.ExtDic:this.DictID=this.DictID
				this.$axios.post(api.edit, {
					"ID": this.id,
					"Extend_Type": this.ExtValue,
					"FieldName": this.form.FieldName,
					"FieldCaption": this.form.FieldCaption,
					"DataType": this.dataValue,
					"DictID": this.DictID,
					"IsMulti": this.val1,
					"IsEmpty": this.val,
					"Status": this.val2,
					"CreateMan": "",
					"CreateDate": ""
				}).then((res) => {
					if(res.data.isOK) {
						this.getlist()
						this.ExtValue = ""
						this.dataValue=""
						this.loading = false
						this.dialogVisible = false;
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//获取扩展属性列表
			getlist() {
				this.loading = true
				this.pageindex = 0
				this.$axios.post(api.getlist, {
					"Para": "",
					"PageSize": 10,
					"PageIndex": this.pageindex,
					"OrderbyString": 'FieldName'
				}).then((res) => {
					if(res.data.isOK) {
						this.tableData5 = res.data.data.Data
						this.leng = res.data.data.Items || 1
						this.loading = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//打开新建
			openMody() {
				this.mody = true;
			},
			chang() {
				var me = this
				if(me.dataValue == 4) {
					me.dict = true
					me.$axios.get(api.dictlist + '/' + 0).then((res) => {
						if(res.data.isOK) {
							for(var i = 0; i < res.data.data.length; i++) {
								me.ExtDics.push({
									value: res.data.data[i].ID.toString(),
									lable: res.data.data[i].DictName,
								})
							}
						}else{
							if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(res.data.msg);
							}
						}
					});
				} else {
					me.dict = false;
					me.ExtDic = "";
					me.ExtDics = []
				}
			},
			chang1() {
				var me = this
				if(me.dataValue == 4) {
					me.dict = true
					me.$axios.get(api.dictlist + '/' + 0).then((res) => {
						if(res.data.isOK) {
							for(var i = 0; i < res.data.data.length; i++) {
								me.ExtDics.push({
									value: res.data.data[i].ID.toString(),
									lable: res.data.data[i].DictName,
								})
							}
						}else{
							if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(res.data.msg);
							}
						}
					});
				} else {
					me.dict = false;
					me.ExtDic = "";
					me.ExtDics = []
				}
			},
			//新建自定义
			add() {
				this.loading = true
				this.$axios.post(api.add, {
					"ID": "",
					"Extend_Type": this.ExtValue,
					"FieldName": this.form.FieldName,
					"FieldCaption": this.form.FieldCaption,
					"DataType": this.dataValue,
					"DictID": this.ExtDic,
					"IsMulti": this.val,
					"IsEmpty": this.val1,
					"Status": this.val2,
					"CreateMan": "",
					"CreateDate": ""
				}).then((res) => {
					if(res.data.isOK) {
						this.getlist()
						this.loading = false
						this.mody = false;
						this.form.FieldName = ""
						this.form.FieldName = ""
						this.form.FieldCaption = ""
						this.dataValue = ""
						this.ExtValue = ""
						this.dataValue=""
						this.val = ""
						this.val1 = ""
						this.val2 = ""
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//是否可空
			isEmpty(id, IsEmpty) {
				this.loading = true
				this.$axios.post(api.editempty, {
					"value": IsEmpty,
					"id": id
				}).then((res) => {
					if(res.data.isOK) {
						this.getlist()
						this.loading = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//是否多选
			isMulti(id, isMulti) {
				this.loading = true
				this.$axios.post(api.editmulti, {
					"value": isMulti,
					"id": id
				}).then((res) => {
					if(res.data.isOK) {
						this.getlist()
						this.loading = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//是否可用
			isstue(id, isstue) {
				this.loading = true
				this.$axios.post(api.editable, {
					"value": isstue,
					"id": id
				}).then((res) => {
					if(res.data.isOK) {
						this.getlist()
						this.loading = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			//搜索排序
			search() {
				this.loading = true
				this.$axios.post(api.getlist, {
					"Para": this.input,
					"PageSize": 10,
					"PageIndex": 0,
					"OrderbyString": 'FieldCaption'
				}).then((res) => {
					if(res.data.isOK) {
						this.tableData5 = res.data.data.Data
						this.leng = res.data.data.Items
						this.loading = false
					} else {
						if(res.data.msg == "Token无效" || res.data.msg == "Token缺失") {
							this.$router.push({
								path: '/login'
							})
						} else {
							this.loading = false
							this.$message.error(res.data.msg);
						}
					}
				});
			},
			change() {
				this.search()
			}
		}
	}
</script>

<style scoped>
	.title1 {
		width: 100%;
		padding: 15px 0;
		text-indent: 20px;
		background: #fff;
		border-bottom: 1px solid #dddee1;
	}
	
	.title1 span {
		margin-right: 10px;
	}
	
	.title1 .h1 {
		font-size: 16px;
		font-weight: 600;
	}
	
	.title1 .h2 {
		font-size: 14px;
	}
	
	.con {
		width: 100%;
		margin-top: 10px;
	}
	
	.page {
		float: right;
		margin-top: 20px;
	}
	
	.el-dialog__body {
		padding-bottom: 0;
	}
	
	.el-dialog__footer {
		padding: 35px 20px 40px;
		text-align: center;
	}
	
	.radis {
		padding-left: 37px;
	}
	
	.radis .el-switch {
		margin: 0 21px;
	}
	
	.edit {
		position: fixed;
		background: rgba(0, 0, 0, .5);
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 999;
	}
	
	.editd .el-dialog--tiny {
		width: 400px !important;
	}
	
	.editd .el-dialog__footer {
		text-align: right !important;
	}
</style>